<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input
        type="text"
        v-model.trim="userName"
      />
    </div>
    <div>
      <span>年龄:</span>
      <input
        type="number"
        v-model.number="userAge"
      />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="userSex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addBtn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr
          v-for="(item,index) in arr"
          :key="item.id"
        >
          <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>
            <button @click="delList(index)">删除</button>
            <button @click="edit(index)">编辑</button>
          </td>
        </tr>

        <tr v-if="arr.length == 0">
          <th colspan="5">没有学生数据了</th>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userName: '',
      userAge: '0',
      userSex: '男',
      editIndex: null,
      arr: [
        {
          name: '小明',
          age: '18',
          sex: '男',
        },
        {
          name: '小红',
          age: '18',
          sex: '女',
        }
      ],
    }
  },
  methods: {
    addBtn () {
      if (this.userName.length == 0 || this.userAge <= 0) {
        alert('不能为空')
        return
      }

      let newObj = {
        name: this.userName,
        age: this.userAge,
        sex: this.userSex
      }
      if (this.editIndex !== null) {
        this.$set(this.arr, this.editIndex, newObj)
        this.editIndex = null
      } else {
        this.arr.push(newObj)
      }
    },
    // 删除
    delList (ind) {
      this.arr.splice(ind, 1)
    },
    // 编辑
    edit (ind) {
      let edit = this.arr[ind]
      this.userName = edit.name
      this.userAge = edit.age
      this.userSex = edit.sex

      this.editIndex = ind
    }
  }
}
</script>
